<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03_jsPDF导出PDF文件</title>
</head>

<body>
    <button id="button">下载</button>

    <article id="article" style="width: 900px;margin: auto;background: #e2f9f4;padding: 20px;">
        <h4 style="text-align: center;">最终章 极北大迷宫</h4>
        <!-- <p>
            <img src="https://image.zhangxinxu.com/image/blog/202306/ai-1.jpg"
                width="298"
                height="295"
                referrerpolicy="no-referrer"
                style="float:left;margin-right: 10px;">
        </p> -->
        <p>“无毛怪，怎么越来越暗啦？”高瑶看着天空说道。</p>
        <p>“我也不太清楚。这一到冬天，瑶湖就暗淡，一到夏天就恢复，看起来与外部的温度有关，可是以前也有冬夏，并没有这样子，唉……”</p>
        <p>杨光忧心忡忡了起来，继续说道，“这样下去还真不行，法力浓度一年比一年低，这样下去，说不定哪一天就暗无天日了，到时候所有的植被和魔兽都会消失。”</p>
        <p>“那怎么办，无毛怪，要不要我去问下？”</p>
        <p>“这个应该问不出来吧，你可以试试。”</p>
        <p>高瑶说完走到了复活点上，法力释放，神识扩散通过复活点和迷宫核心建立了联系，开始询问迷宫衰落的事情。</p>
        <p>……</p>
        <p>高瑶得意一笑：“无毛怪，我知道怎么回事了？”</p>
        <p>“还真问出来了啊！怎么回事？”</p>
        <p>“就那个啊，能量不足。”</p>
        <p>“我也知道能量不足，关键是怎么会能量不足呢？”</p>
        <p>“用得多呗，只出不进，没有补充。”</p>
        <p>“没有补充？”杨光眉头一皱，想了片刻，随后一拍脑门，茅塞顿开。</p>
        <p>“我犯二了，这么简单的原因都没想到，我这些年养了太多的鱼，这些鱼用完之后都在迷宫外无公害化了，大量的法力随着鱼流失了，但是并没有外部的法力过来补充迷宫，所以才能量不足。”</p>
        <p>杨光摸了摸高瑶的头，感叹道：“我看来犯了个严重的错误，本想保护你，反而害了你！”</p>
        <p>高瑶一脸莫名……</p>
        <p>“我把这座迷宫像你一样呵护，结果养成了温室里的花朵，我终于知道为什么迷宫会开放这么多通道给外部了，为什么冬季的时候魔物不会复活了，为什么魔物至少需要杀死一个人类才能离开迷宫。</p>
        <p>这座迷宫就像一个成熟的果树，吸引外面贪婪的人类过来，通过给予经验的方式换取人类带过来的法力。</p>
        <p>同时对迷宫魔物进行优胜劣汰，筛选合适的迷宫种子。”</p>
        <p>高瑶眨了眨卡姿兰大的眼睛，似懂非懂。</p>
        <!-- <p>
            <img src="https://image.zhangxinxu.com/image/blog/202306/ai-2.jpg"
                width="297"
                height="296"
                referrerpolicy="no-referrer"
                style="float:left;">
        </p> -->
        <p>“所以，只需要把中低纬度那里的迷宫能量通过人类转移到我们这座迷宫，就能恢复正常了。</p>
        <p>让我想想，我是不是可以把一些装备转移到暗空间，和魔物绑定，一旦魔物的法力枯竭或者溃散，就触发这些装备掉落，借此吸引人过来……</p>
        <p>貌似可行，看来，最近又有得忙了。”</p>
        <p>杨光立即去凌霄殿去找王冰菁，去道极宗找青花，约定了每年开放部分迷宫给年轻的修炼者进行秘境探索。</p>
        <p>去了欧若拉城这边，让所有公会取消了“禁止攻略极北大迷宫”的公约，并重新打通了通往极北大迷宫的远端入口，这个入口距离欧若拉城不过100多千米。</p>
        <p>然而……不作不死大坟墓的传说影响太深远，没人敢当小白鼠北上极北大迷宫。</p>
        <p>两个月后，即将开春，一个二十岁不到的穷酸小子站在了迷宫的入口，发狠道：“玲玲，等我，我时来运一定会成为配得上你的男人！”</p>
        <p>然后义无反顾地深入了无尽绵延的极北大迷宫的通道中。</p>
        <p>时来运在昏暗的迷宫通道内小心地探索，前进了快二十千米，依然是个单向通道，没有任何分叉，遇到了很多生物，不过都不是魔物。</p>
        <p>这和时来运想得完全不一样，不是说这个迷宫内都是可怕的魔物，等级都很高的么？怎么一路走来什么事情都没有发生呢？</p>
        <p>时来运腿都快走断了，累得不行，就找了个干燥的石块坐下来休息，喝了口水，然后拿起一把刀口开卷的匕首在石头上磨了又磨。</p>
        <p>就在这时，前方黑暗之中传来持续不断的梭梭声，时来运像弹簧一样弹立了起来，双手紧紧地握住短刀，慢慢地往后倒退。</p>
        <p>随着声音越来越大，时来运全身不由自主地颤抖了起来，出现了，是只足有两米长的高脚蜈蚣。</p>
        <p>时来运一看，LV10，慌了，欧若拉迷宫LV10的魔物至少地下三四层才会出现，怎么自己碰到的第一个魔物就是这个，运气太差了吧，难道这个迷宫难度就是这么高的吗？</p>
        <p>“玲玲！为了我的玲玲！我和你拼了！”时来运冲了上去，估算着，这只蜈蚣身体不过手臂这么粗，只要不被咬到，还是有机会取胜的。</p>
        <p>时来运用尽全力闪到了高脚蜈蚣的侧面，对着蜈蚣的背甲用力砍去，“当”地一声脆响，刀身和刀柄位置突然断开了，刀身未能砍入蜈蚣的背甲，反而弹飞了，狠狠地插在了迷宫通道顶部的石壁。</p>
        <p>“完了，再见了，我的玲玲……”时来运知道自己死定了。</p>
        <p>可万万没想到，迷宫通道顶部的石壁突然脱落掉了下来，正好砸在了高脚蜈蚣的身上，高脚蜈蚣半截身体稀烂，扭动了几下，化作光点消失了。</p>
        <p>时来运呆坐在地上，完全不敢相信眼前发生的一切，抬头看了看顶部，应该是自己的飞刀偶然击中了一块本来就要掉落的石块。</p>
        <p>时来运正想站起来取走已经烂到不行的匕首，突然，眼前的景物变得扭曲了，随着一道白光散开，“哐当”掉落了一把一尺长的短刀，还有一个画卷一样的东西。</p>
        <p>时来运左看看，右看看，没有其他人啊，哪来的武器，哪来的画卷？吓得跑开了十多米，想想不对，又回头看了看，碎石、短刀、画卷，安静且真实，又鼓起勇气走了过去。</p>
        <p>战战兢兢地拿过短刀，然后迅速跑开，没有任何变化，时来运长吁一口气，看来没有陷阱，借助昏暗的光线仔细看了看，好刀啊，一看刀身纹理就不一样，咦，上面还有字。</p>
        <p>时来运取出探照灯一照，整个人像中了定身术一样呆住了，这是什么？——</p>
        <p>“普通、高级、稀有（√）、神级、传说、史诗”</p>
        <p>居然还有武器等级提示，这把武器是稀有级别吗，这么屌，时来运心脏狂跳不止，自己这是走大运了吗！</p>
        <p>深吸一口气，平复了下心情，在短刀上附加了些许法力然后轻轻一挥，数米外的石壁直接炸开了一道深深的裂口。</p>
        <p>时来运惊讶到眼珠差点掉下来，“这……这威力，这是什么武器，开挂了吧？”</p>
        <p>时来运还发现，自己只要一附加法力，刀身上的装备等级提示文字就会发光，从普通到史诗的文字颜色分别是白、蓝、紫、粉、橙、黄。</p>
        <p>“天啊，这是怎么做到文字发光变色的，那岂不是不要担心武器被伪造了！”</p>
        <p>时来运大喜，风一般地冲过去拿起了画卷，上面也有等级文字，施加法力后也会发光，是高级卷轴，上面还有一些信息，我看看。</p>
        <p>风系卷轴，我去，上面显示了攻击威力和攻击范围，不太可能吧，这么强，还有神圣属性，是个保命神器啊！</p>
        <p>时来运激动不已，武器很有用，自己留着，这个卷轴自己用不到，可以卖掉，哈哈哈，发达了我，玲玲，等我！</p>
        <p>……</p>
    </article>

    <!-- https://www.zhangxinxu.com/wordpress/2023/06/js-canvas-jspdf-export-pdf/ -->
    <!-- https://github.com/parallax/jsPDF -->
    <!-- https://github.com/niklasvh/html2canvas -->
    <script src="../assets/html2canvas1.4.1/html2canvas.js"></script>
    <script src="../assets/jsPDF-2.5.1/jspdf.umd.js"></script>
    <script>
        const { jsPDF } = window.jspdf;
    </script>
    <script>
        // 
        // 官方的使用示意
        //
        // Landscape export, 2×4 inches
        // const doc = new jsPDF({
        //     orientation: "landscape",
        //     unit: "in",
        //     format: [4, 2]
        // });
        // doc.text("Hello world!", 1, 1);
        // doc.save("two-by-four.pdf");
    </script>
    <script>
        //
        // 内置html()方法
        //
        // var doc2 = new jsPDF();
        // // element就是需要转变为pdf的DOM元素
        // doc2.html(
        //     document.getElementById('article')
        //     , {
        //         callback: function (doc) {
        //             doc.save();
        //         },
        //         x: 10,
        //         y: 10
        //     });
    </script>
    <script>
        //
        // html2canvas 转图片，在转pdf
        //
        // var doc3 = new jsPDF();
        // html2canvas(
        //     document.getElementById('article'),
        //     {
        //         width: 900,
        //     }
        // ).then(function (canvas) {
        //     const img = canvas.toDataURL('image/jpeg')
        //     console.log(img)
        //     doc3.addImage(img, 10, 10);
        //     doc3.save('mybook.pdf');
        // });
    </script>

    <script type="module">
        import { exportPdf } from './exportPdf.js';
        // 点击按钮执行PDF导出
        document.getElementById('button').addEventListener('click', () => {
            // 显示loading
            button.loading = true;
            // 由于导出PDF是异步的，所以需要在导出完成后隐藏loading
            exportPdf(document.getElementById('article'), '最终章 极北大迷宫', () => {
                button.loading = false;
            })
        });
    </script>
</body>

</html>